<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<style>
			/* 通用选择器：通用效果 盒模型：内外边距 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 容器：看3D视觉效果  宽高 居中 视觉属性 */
			.container{
				width: 300px;
				height: 300px;
				margin: 200px auto;
				/* 视觉属性:  数值培px; 拉开距离 */
				perspective: 3000px;
				bo rder: 1px solid red;
			}
			/* 魔方整体：宽高  指定3D坐标轴[3D效果层] 查看3D坐标轴 【X Y】 动画*/
	.box{
		width: 300px;
		height: 300px;
		/* 3D效果层：指定3D坐标轴  具备X Y Z轴  */
		
		transform-style: preserve-3d;
		/* 倾斜：XY倾斜45deg */
		transform: rotateX(45deg) rotateY(45deg);
		animation: mofang 8s linear infinite;
		}
		@keyframes mofang {
			0%{
				transform: rotateX(45deg) rotateY(45deg);
			}
			70%{
				transform: rotateX(180deg) rotateY(180deg);
			}
			100%{
				transform: rotateX(360deg) rotateY(360deg);
			}
			
			
		}
		.page{
			width: 300px;
		    height: 300px;
			position: absolute;
		}
		.page_top{
			background-color: #00aaff;
			/* 前面平移150px */
			transform: translateZ(150px);
			background: url(../project/img/IMG_20251030_155150.jpg);
		}
		.page_bottom{
					background-color: #aaffff;
				    transform: translateZ(-150px);
					background: url(../project/img/IMG_20251030_155202.jpg);
				}
		.page_left{
					background-color: #55ffff;
					/* 	X轴 向左位移 按照Y轴 旋转90deg */
					transform: translateX(-150px) rotateY(90deg);
					background: url(../project/img/IMG_20251030_155212.jpg);
				}	
		.page_right{
					background-color: #0000ff;
					transform: translateX(150px) rotateY(90deg);
					background: url(../project/img/IMG_20251030_155212.jpg);
				}	
		.page_before{
					background-color: #aaff7f;
					transform: translateY(150px) rotateX(90deg);
					background: url(../project/img/IMG_20251030_155237.png);
				}	
		.page_after{
					background-color: #5500ff;
					transform: translateY(-150px) rotateX(90deg);
					background: url(../project/img/IMG_20251030_155250.png);
				}					
	  </style>
	</head>
	<body>
		<!-- 3D魔方 1.容器 ：看3D效果 2.魔方整体 3.6个面
		 -->
		 <div class="container">
		 	<div class="box">
				<!-- 6个面：宽高一致 颜色不一致
				 使用类选择器：多别名方式解决上述问题
				 -->
		 		<div class="page page_top"></div>
		 		<div class="page page_bottom"></div>
		 		<div class="page page_left"></div>
		 		<div class="page page_right"></div>
		 		<div class="page page_before"></div>
		 		<div class="page page_after"></div>
		 	</div>
		 </div>
			<audio src="img/img/gf.mp3"></audio>
			1
	</body>
</html>